<template>
  <div>
    代码组织方式
  </div>
</template>

<script>
import { computed, ref } from "vue";

const useOne = () => {
  const one = ref(1);
  const callFoo = () => {
    console.log(one);
  };
  const foo = computed(() => {
    return one.value + "foo";
  });

  return {
    one,
    foo,
  };
};

// 去完成一个功能
export default {
  //   data() {
  //     return {
  //       one: "1",
  //       two: "2",
  //       three: "3",
  //     };
  //   },
  //   computed: {
  //     foo() {
  //       return this.one + "foo";
  //     },
  //     bar() {
  //       return this.two + "bar";
  //     },
  //   },
  //   watch: {
  //     foo() {
  //       // ........
  //     },

  //     bar() {
  //       // ........
  //     },
  //   },
  //   methods: {
  //     callFoo() {
  //       console.log(this.foo);
  //     },
  //     callBar() {
  //       console.log(this.bar);
  //     },
  //   },

  setup() {
    // 函数命名就能一眼知道是什么功能
    const { one } = useOne();
    const { two } = useTwo();
    const { three } = uesThree();

    return {
      one,
      two,
      three,
    };
    // 意大利面条
    // 功能2
    // const one = ref(1);
    // const callFoo = () => {
    //   console.log(one);
    // };
    // const foo = computed(() => {
    //   return one.value + "foo";
    // });
    //
    // 功能3
    // const one = ref(1);
    // const callFoo = () => {
    //   console.log(one);
    // };
    // const foo = computed(() => {
    //   return one.value + "foo";
    //
  },
};
</script>

<style></style>
